<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header
        :is-back="true"
        backPath="/shoppingCart"
      ></n-header>
    </el-header>
    <el-main class="main">
      <div style="width: 1000px; display: flex; flex-direction: column; color: #333;font-size: 14px;">
        <div
          v-show="data.logisticsState === 0"
          style="display: flex; justify-content: space-between;"
        >
          <div>订单提交成功，请尽快付款 订单号: {{ orderId }}</div>
          <div>应付金额<span style="color: #e31613; font-size: 18px; padding: 0 4px;">{{ this.data.totalPrice }}</span>元</div>
        </div>
        <div
          v-show="data.logisticsState !== 0"
          style="display: flex; justify-content: space-between;"
        >
          <div>订单到期取消，订单号: {{ orderId }}</div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 5px;">
          <span v-show="countDown !== ''">请在 <span style="color: #e31613;">{{ countDown }}</span> 内完成支付，否则订单会被自动取消</span>
          <span
            v-show="countDown === ''"
            class="order-info"
            @click="this.$router.push('/shoppingCart')"
          >订单已自动取消点击返回购物车</span>
          <span
            class="order-info"
            @click="isShowOrderInfo = !isShowOrderInfo"
          >订单详情
            <el-icon>
              <CaretTop v-show="!isShowOrderInfo" />
              <CaretBottom v-show="isShowOrderInfo" />
            </el-icon>
          </span>
        </div>

        <div
          v-show="isShowOrderInfo"
          style="color: #666666; display: flex; flex-direction: column;"
        >
          <el-divider></el-divider>
          <span>收货地址: {{ data.area + data.address }} 收货人: {{ data.consignee + "   " + data.phone }}</span>
          <span style="display: flex;">
            <div style="width: 100px;">商品名称:</div>
            <div>{{ data.name }}</div>
          </span>
        </div>

        <el-card style="margin-top: 10px;">
          <el-card style="display: flex; justify-content: center; align-items: center;">
            <el-image
              style="width: 500px; height: 500px;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            ></el-image>
          </el-card>
          <div style="display: flex; justify-content: end;">
            <el-button
              color="#3271ae"
              style="width: 200px; height: 50px; margin-top: 10px;"
              @click="doOrderPay"
            >立即支付</el-button>
          </div>
        </el-card>
      </div>
    </el-main>
    <el-footer> </el-footer>
  </el-container>
</template>
  
  <script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/shoppingCart/SearchBar.vue";

import { useOrderInfo } from "@/store/order";
const orderInfo = useOrderInfo();

import { orderId, orderPay } from "@/api/order";
import { ElMessage } from "element-plus";

export default {
  components: {
    NHeader: NHeaderVue,
    NSearchBar: NSearchBarVue,
    SearchBar: SearchBarVue,
  },
  computed: {},
  data() {
    return {
      orderId: orderInfo.orderId,
      data: {},
      countDown: "",
      timer: null,
      isShowOrderInfo: false,
    };
  },
  methods: {
    doOrderId() {
      orderId(this.orderId).then((res) => {
        this.data = res;
      });
    },
    doOrderPay() {
      if (this.countDown === "" || this.data.logisticsState !== 0) {
        ElMessage.error("订单已过期");
        return;
      }

      orderPay(this.orderId).then((res) => {
        this.$router.push("/order");
      });
    },

    startCountDown() {
      this.timer = setInterval(() => {
        const now = new Date().getTime();
        const target = new Date(this.data.endTime).getTime();

        const distance = target - now;
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        this.countDown = `${minutes} 分钟 ${seconds} 秒`;

        if (distance < 0) {
          clearInterval(this.timer);
          this.countDown = "";
          this.data.logisticsState = 6;
        }
      }, 1000);
    },
  },
  created() {
    this.doOrderId();
    this.startCountDown();
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
  
  <style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 20px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.order-info:hover {
  cursor: pointer;
  color: #3271ae;
}
</style>